<template>
    <div v-if="visible" class="cgs-shadow-wrapper no-select">
        <div class="cgs-dialog-wrapper" :style="{width: width + 'px'}">
            <div class="cgs-dialog-header">
                <div class="cgs-dialog-title">一&nbsp;{{title}}&nbsp;一</div>
                <div class="cgs-dialog-title-close close"
                     @click.stop="onCancel"
                />
            </div>
            <div class="cgs-dialog-info">
                <slot></slot>
            </div>
            <div class="btn-wrapper">
                <div class="dialog-btn-ok" @click="onOk">{{okText}}</div>
                <div class="dialog-btn-cancel" @click="onCancel">{{cancelText}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CgsDialog",
        props: {
            mask: { /* 控制遮罩 */
                type: Boolean,
                default: false
            },
            title: { /* 控制遮罩 */
                type: String,
                default: '标题'
            },
            cancelText: { /* 取消按钮文字 */
                type: String,
                default: ''
            },
            okText: { /* 确认按钮文字 */
                type: String,
                default: ''
            },
            visible: {
                type: Boolean,
                default: false
            },
            width: {
                type: Number,
                default: 700
            }
        },
        data () {
        },
        methods: {
            onCancel () { /* 点击取消 */
                this.$emit('cancel')
            },
            onOk () { /* 点击确认 */
                this.$emit('ok')
            }
        }
    }
</script>

<style scoped>
    /* 覆盖整个页面 */
    .cgs-shadow-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.6);
    }
    /* 垂直居中 */
    .cgs-dialog-wrapper{
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #202A38;
        border-radius: 6px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #FFFFFF;
    }
    .cgs-dialog-header {
        width: 100%;
        height: 50px;
        background: #24303E;
        border-radius: 2px 2px 0px 0px;
    }
    .cgs-dialog-title {
        text-align: center;
        height: 50px;
        line-height: 50px;
    }
    .cgs-dialog-title-close {
        position: absolute;
        right: 20px;
        top: 20px;
        height: 15px;
        width: 15px;
        background-size: 100% 100%;
        cursor: pointer;
    }
    .cgs-dialog-info{
        min-height: 180px;
        padding-left: 40px;
        padding-right: 40px;
    }
    .btn-wrapper{
        /*position: absolute;*/
        /*bottom: 0;*/
        display: flex;
        height: 60px;
        width: 100%;
    }
    .dialog-btn-ok {
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        margin-left: calc(50% - 150px);
        background: #4C84FF;
        border-radius: 2px;
        cursor: pointer;
    }
    .dialog-btn-cancel {
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        color: #4C84FF;
        cursor: pointer;
        margin-left: 75px;
        border-radius: 2px;
        border: 1px solid #4C84FF;
    }

</style>
